<template>
  <div class="bg-light min-vh-100">
    <!-- 顶部导航 -->
    <header class="bg-primary text-white shadow-sm">
      <div class="container py-3">
        <div class="d-flex justify-content-between align-items-center">
          <h1 class="h4 mb-0 fw-bold">个人中心</h1>
          <button class="btn btn-light text-primary">
            <i class="fas fa-sign-out-alt me-1"></i> 返回首页
          </button>
        </div>
      </div>
    </header>

    <main class="container py-4">
      <!-- 用户信息卡片 -->
      <div class="card shadow-sm mb-4">
        <div class="card-body">
          <div class="row">
            <!-- 头像区域 -->
            <div class="col-md-3 text-center mb-4 mb-md-0">
              <div class="position-relative d-inline-block">
                <img 
                  :src="userInfo.avatar || 'https://picsum.photos/200/200?random=user'" 
                  alt="用户头像" 
                  class="rounded-circle border border-4 border-warning shadow-sm"
                  style="width: 128px; height: 128px; object-fit: cover;"
                >
                <label class="position-absolute bottom-0 end-0 bg-primary text-white rounded-circle p-2 cursor-pointer">
                  <i class="fas fa-camera"></i>
                  <input type="file" class="d-none" @change="handleAvatarUpload">
                </label>
              </div>
            </div>
            
            <!-- 个人信息 -->
            <div class="col-md-9">
              <div class="d-flex justify-content-between align-items-start mb-3">
                <div>
                  <div class="d-flex align-items-center mb-2">
                    <h2 class="h5 mb-0 me-2" v-if="!isEditingUsername">{{ userInfo.username || '未设置昵称' }}</h2>
                    <input 
                      v-else
                      v-model="tempUsername" 
                      @blur="toggleUsernameEdit"
                      @keyup.enter="toggleUsernameEdit"
                      class="form-control form-control-sm d-inline-block w-auto"
                      ref="usernameInput"
                    >
                    <button 
                      v-if="!isEditingUsername" 
                      class="btn btn-link text-warning p-0 ms-1"
                      @click="toggleUsernameEdit"
                    >
                      <i class="fas fa-pencil-alt"></i>
                    </button>
                  </div>
                  <div class="text-muted small">
                    <span>用户ID: {{ userInfo.userId || '未分配' }}</span>
                  </div>
                </div>
                <button 
                  class="btn btn-link text-danger p-0"
                  @click="handleAccountDeletion"
                >
                  <i class="fas fa-trash-alt me-1"></i>
                  <span>注销账号</span>
                </button>
              </div>
              
              <!-- 个人资料表单 -->
              <div class="row g-3">
                <div class="col-md-6">
                  <label class="form-label small text-muted">手机号</label>
                  <div class="form-control-plaintext bg-light rounded p-2">
                    {{ maskedPhone }}
                  </div>
                </div>
                
                <div class="col-md-6">
                  <label class="form-label small text-muted">邮箱</label>
                  <div class="form-control-plaintext bg-light rounded p-2">
                    {{ userInfo.email || '未设置邮箱' }}
                  </div>
                </div>
                
                <div class="col-12">
                  <label class="form-label small text-muted">地址</label>
                  <div class="form-control-plaintext bg-light rounded p-2">
                    {{ userInfo.address || '未设置地址' }}
                  </div>
                </div>
                
                <div class="col-12">
                  <button class="btn btn-primary mt-2">
                    <i class="fas fa-edit me-1"></i> 编辑个人信息
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 我的宠物 -->
      <section class="mb-4">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <h2 class="h5 mb-0">我的宠物</h2>
          <button class="btn btn-primary btn-sm">
            <i class="fas fa-plus me-1"></i> 添加宠物
          </button>
        </div>
        
        <div class="row g-3">
          <!-- 宠物卡片 -->
          <div class="col-sm-6 col-lg-4">
            <div class="card h-100 shadow-sm">
              <div style="height: 192px; overflow: hidden;">
                <img 
                  src="https://picsum.photos/400/300?random=pet1" 
                  alt="宠物照片" 
                  class="card-img-top h-100 object-fit-cover"
                >
              </div>
              <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-2">
                  <h3 class="h6 mb-0">贝贝</h3>
                  <span class="badge bg-warning text-dark">已认证</span>
                </div>
                <div class="text-muted small mb-3">
                  <span class="me-3"><i class="fas fa-venus-mars me-1"></i> 公</span>
                  <span><i class="fas fa-birthday-cake me-1"></i> 2岁</span>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                  <span class="small text-muted">金毛犬</span>
                  <button class="btn btn-link text-warning p-0">
                    <i class="fas fa-pencil-alt"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
          
          <div class="col-sm-6 col-lg-4">
            <div class="card h-100 shadow-sm">
              <div style="height: 192px; overflow: hidden;">
                <img 
                  src="https://picsum.photos/400/300?random=pet2" 
                  alt="宠物照片" 
                  class="card-img-top h-100 object-fit-cover"
                >
              </div>
              <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-2">
                  <h3 class="h6 mb-0">咪咪</h3>
                  <span class="badge bg-light text-muted">未认证</span>
                </div>
                <div class="text-muted small mb-3">
                  <span class="me-3"><i class="fas fa-venus-mars me-1"></i> 母</span>
                  <span><i class="fas fa-birthday-cake me-1"></i> 1岁</span>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                  <span class="small text-muted">布偶猫</span>
                  <button class="btn btn-link text-warning p-0">
                    <i class="fas fa-pencil-alt"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 添加宠物卡片 -->
          <div class="col-sm-6 col-lg-4">
            <div class="card h-100 border-2 border-dashed d-flex flex-column align-items-center justify-content-center p-4 text-center cursor-pointer hover-border-warning">
              <div class="rounded-circle bg-warning bg-opacity-10 d-flex align-items-center justify-content-center mb-3" style="width: 64px; height: 64px;">
                <i class="fas fa-plus text-warning fs-4"></i>
              </div>
              <p class="text-muted mb-0">添加新宠物</p>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 宠物服务 -->
      <section>
        <div class="d-flex justify-content-between align-items-center mb-3">
          <h2 class="h5 mb-0">我的服务</h2>
          <div class="btn-group" role="group">
            <button class="btn btn-primary btn-sm">全部</button>
            <button class="btn btn-outline-secondary btn-sm">进行中</button>
            <button class="btn btn-outline-secondary btn-sm">已完成</button>
          </div>
        </div>
        
        <div class="vstack gap-3">
          <!-- 服务订单卡片 -->
          <div class="card shadow-sm">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-start mb-3">
                <div>
                  <h3 class="h6 mb-1">宠物美容</h3>
                  <p class="small text-muted mb-0">服务时间: 2025-05-15 10:00</p>
                </div>
                <span class="badge bg-warning">待服务</span>
              </div>
              <div class="d-flex align-items-center mb-3">
                <div class="flex-shrink-0 me-3" style="width: 64px; height: 64px;">
                  <img src="https://picsum.photos/200/200?random=service1" alt="服务图片" class="rounded w-100 h-100 object-fit-cover">
                </div>
                <div class="flex-grow-1">
                  <p class="mb-1 fw-medium">贝贝 (金毛犬)</p>
                  <p class="small text-muted mb-0">洗澡 + 造型 + 剪指甲</p>
                </div>
              </div>
              <div class="d-flex justify-content-between align-items-center pt-3 border-top">
                <span class="fw-bold text-primary">¥268.00</span>
                <div class="btn-group" role="group">
                  <button class="btn btn-outline-secondary btn-sm">
                    取消订单
                  </button>
                  <button class="btn btn-primary btn-sm">
                    查看详情
                  </button>
                </div>
              </div>
            </div>
          </div>
          
          <div class="card shadow-sm">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-start mb-3">
                <div>
                  <h3 class="h6 mb-1">宠物寄养</h3>
                  <p class="small text-muted mb-0">服务时间: 2025-05-20 至 2025-05-25</p>
                </div>
                <span class="badge bg-success">已完成</span>
              </div>
              <div class="d-flex align-items-center mb-3">
                <div class="flex-shrink-0 me-3" style="width: 64px; height: 64px;">
                  <img src="https://picsum.photos/200/200?random=service2" alt="服务图片" class="rounded w-100 h-100 object-fit-cover">
                </div>
                <div class="flex-grow-1">
                  <p class="mb-1 fw-medium">咪咪 (布偶猫)</p>
                  <p class="small text-muted mb-0">5天寄养服务</p>
                </div>
              </div>
              <div class="d-flex justify-content-between align-items-center pt-3 border-top">
                <span class="fw-bold text-primary">¥888.00</span>
                <div class="btn-group" role="group">
                  <button class="btn btn-primary btn-sm">
                    查看详情
                  </button>
                  <button class="btn btn-outline-secondary btn-sm">
                    评价服务
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
    
    <!-- 页脚 -->
    <footer class="bg-dark text-white mt-4 py-4">
      <div class="container">
        <div class="row g-4">
          <div class="col-md-3">
            <h3 class="h6 fw-bold mb-3">宠物服务</h3>
            <ul class="nav flex-column">
              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-white-50 hover-text-warning">美容洗护</a></li>
              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-white-50 hover-text-warning">健康医疗</a></li>
              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-white-50 hover-text-warning">宠物寄养</a></li>
              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-white-50 hover-text-warning">训练服务</a></li>
            </ul>
          </div>
          <div class="col-md-3">
            <h3 class="h6 fw-bold mb-3">关于我们</h3>
            <ul class="nav flex-column">
              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-white-50 hover-text-warning">公司简介</a></li>
              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-white-50 hover-text-warning">服务网点</a></li>
              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-white-50 hover-text-warning">加入我们</a></li>
              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-white-50 hover-text-warning">联系方式</a></li>
            </ul>
          </div>
          <div class="col-md-3">
            <h3 class="h6 fw-bold mb-3">帮助中心</h3>
            <ul class="nav flex-column">
              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-white-50 hover-text-warning">常见问题</a></li>
              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-white-50 hover-text-warning">用户手册</a></li>
              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-white-50 hover-text-warning">服务条款</a></li>
              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-white-50 hover-text-warning">隐私政策</a></li>
            </ul>
          </div>
          <div class="col-md-3">
            <h3 class="h6 fw-bold mb-3">联系我们</h3>
            <ul class="nav flex-column">
              <li class="nav-item mb-2">
                <i class="fas fa-phone me-2"></i> 400-123-4567
              </li>
              <li class="nav-item mb-2">
                <i class="fas fa-envelope me-2"></i> service@pet.com
              </li>
              <li class="nav-item mb-2">
                <i class="fas fa-map-marker-alt me-2"></i> 北京市朝阳区宠物大厦
              </li>
            </ul>
            <div class="d-flex gap-2 mt-3">
              <a href="#" class="btn btn-dark rounded-circle p-0 d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">
                <i class="fab fa-weixin"></i>
              </a>
              <a href="#" class="btn btn-dark rounded-circle p-0 d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">
                <i class="fab fa-weibo"></i>
              </a>
              <a href="#" class="btn btn-dark rounded-circle p-0 d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">
                <i class="fab fa-instagram"></i>
              </a>
            </div>
          </div>
        </div>
        <div class="border-top border-secondary mt-4 pt-4 text-center text-white-50 small">
          <p class="mb-0">© 2025 宠物服务平台 版权所有</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'Profile',
  data() {
    return {
      userInfo: {
        avatar: 'https://picsum.photos/200/200?random=user',
        username: '宠物爱好者',
        userId: 'PET2025001',
        phone: '13812345678',
        email: 'pet@example.com',
        address: '北京市朝阳区建国路88号'
      },
      isEditingUsername: false,
      tempUsername: ''
    }
  },
  computed: {
    maskedPhone() {
      if (!this.userInfo.phone) return '';
      return this.userInfo.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
    }
  },
  methods: {
    toggleUsernameEdit() {
      if (this.isEditingUsername) {
        // 保存用户名
        if (this.tempUsername.trim()) {
          this.userInfo.username = this.tempUsername.trim();
        }
        this.isEditingUsername = false;
      } else {
        // 开始编辑用户名
        this.tempUsername = this.userInfo.username;
        this.isEditingUsername = true;
        this.$nextTick(() => {
          this.$refs.usernameInput.focus();
        });
      }
    },
    handleAvatarUpload(event) {
      const file = event.target.files[0];
      if (file) {
        // 这里应该有上传逻辑，现在只是模拟
        const reader = new FileReader();
        reader.onload = (e) => {
          this.userInfo.avatar = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    },
    handleAccountDeletion() {
      if (confirm('确定要注销账号吗？此操作不可恢复！')) {
        // 这里应该有注销账号的逻辑
        alert('账号已注销！');
      }
    }
  }
}
</script>

<style scoped>
/* 自定义样式补充 */
.hover-text-warning:hover {
  color: #ffc107 !important;
}

.hover-border-warning:hover {
  border-color: #ffc107 !important;
}

.cursor-pointer {
  cursor: pointer;
}

.object-fit-cover {
  object-fit: cover;
}

/* 头像上传按钮悬停效果 */
.bg-primary:hover {
  background-color: #0b5ed7 !important;
}

/* 卡片悬停效果 */
.card:hover {
  transform: translateY(-2px);
  transition: transform 0.2s ease;
}

/* 输入框动画 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>